<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" style="margin-left:5px;" @click="exportData" :loading="exportLoading">导出
    </el-button>
    <div class="filter-container">
      <el-date-picker class="filter-item" style="width: 230px;" v-model="query.queryString.daterange" type="daterange"
        value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="datePickerOption">
      </el-date-picker>
      <!--<el-select class="filter-item" style="width: 200px;" v-model="query.queryString.line"
                       placeholder="选择线体" filterable clearable>
                <el-option v-for="(item,index) in options.line" :key="index" :value="item.line_name"></el-option>
            </el-select>-->
      <el-input class="filter-item" style="width: 240px;" clearable v-model="query.queryString.sn" placeholder="流水号">
      </el-input>
      <!--<el-select class="filter-item" style="width: 200px;" v-model="query.queryString.group"
                       placeholder="选择工序" filterable clearable>
                <el-option v-for="(item,index) in options.group" :key="index" :value="item.group_name"></el-option>
            </el-select>-->
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="warning" plain @click="reset">重置
      </el-button>
    </div>
    <el-table :data="list" style="width: 100%" border>
      <el-table-column v-for="(f,name) in config.fields" v-if="!f.grid.hidden" :key="name" :label="f.label" :prop="name"
        show-overflow-tooltip :fixed="f.grid.fixed" :width="f.grid.width">
        <template slot-scope="{row}">
          <span v-if="name==='error_flag'"><span :class="row.statusClass">{{row[name]}}</span></span>
          <span v-else>{{row[name]}}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @pagination="getList" />
  </div>
</template>

<script>
import { arrayToObject, dateTools, deepClone } from '@/utils'
import Pagination from '@/components/Pagination'

const source_config = {
  fields: {
    /*'rowId': {label: '编号', grid: {width: 170}},*/
    serial_number: { label: '流水号', grid: { width: 170, fixed: 'left' } },
    sku_code: { label: '产品品号', grid: { width: 120 } },
    sku_name: { label: '品名', grid: { width: 140 } },
    brief_code: { label: '品号简码', grid: { width: 80 } },
    test_item: { label: '测试项目', grid: { width: 160 } },
    test_value: { label: '测试值', grid: { width: 70 } },
    item_value_standard: { label: '标准值', grid: { width: 70 } },
    test_start_time: { label: '测试开始时间', grid: { width: 140 } },
    test_end_time: { label: '测试结束时间', grid: { width: 140 } },
    test_device: { label: '测试设备', grid: { width: 75 } },
    product_name: { label: '测试产品名', grid: { width: 140 } },
    steel_number: { label: '钢印号', grid: { width: 160 } },
    test_file_name: { label: '测试结果文件', grid: { width: 100 } },
    remarks: { label: '备注', grid: { width: '100' } },
    tester_name: { label: '测试员', grid: { width: 85 } },
    error_flag: { label: '测试结果', grid: { width: 85, fixed: 'right' } },
  },
}
const emptyData = {}
const defaultQurey = {}
const statusArry = { TRUE: 'PASS', FALSE: 'FAIL' }
const statusClass = { TRUE: 'bg-green', FALSE: 'bg-red' }

export default {
  name: 'iottestlogReport',
  components: { Pagination },
  data: function () {
    return {
      name: '查询ATE测试结果',
      api: this.$api.iottestlog,
      pageLoading: false,
      exportLoading: false,
      query: {
        page: 1,
        size: 10,
        queryString: { ...defaultQurey },
      },
      list: [],
      exprotList: [],
      total: 0,
      config: source_config,
      options: { line: [], group: [] },
      datePickerOption: {
        shortcuts: [
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '当月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const end = today
              const start = dateTools.first_day(today)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -1))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '上上月',
            onClick(picker) {
              let today = dateTools.FormatDate()
              const start = dateTools.first_day(dateTools.add_month(today, -2))
              const end = dateTools.last_day(start)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },
  methods: {
    getList() {
      this.pageLoading = true
      this.$request(this.api, this.formatQuery(this.query))
        .then((r) => {
          console.info(r)
          this.pageLoading = false
          this.list = this.formatData(r.list)
          this.total = r.total
        })
        .catch(() => {
          this.pageLoading = false
        })
    },
    research() {
      this.query.page = 1
      this.total = 0
      this.list = []
      this.getList()
    },
    reset() {
      this.query.page = 1
      this.query.queryString = { ...defaultQurey }
      this.total = 0
      this.list = []
      this.getList()
    },
    formatQuery(query, nopage = false) {
      let tmp = deepClone(query)
      if (tmp.queryString.daterange) {
        tmp.queryString.start = tmp.queryString.daterange[0]
        tmp.queryString.end = tmp.queryString.daterange[1]
        delete tmp.queryString.daterange
      }
      if (nopage) {
        delete tmp.page
      }
      return tmp
    },
    formatData(data) {
      return data.map((item) => {
        let tmp = { ...item }
        tmp.statusClass = 'text-label ' + statusClass[tmp.test_status]
        tmp.error_flag = statusArry[tmp.test_status]
        return tmp
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }),
      )
    },
    exportData() {
      this.exportLoading = true
      this.$request(this.api, this.formatQuery(this.query, true))
        .then((r) => {
          this.exprotList = this.formatData(r.list)
          import('@/vendor/Export2Excel')
            .then((excel) => {
              const filterVal = Object.keys(this.config.fields)
              const tHeader = filterVal.map((item) => {
                return this.config.fields[item].label || ''
              })
              const data = this.formatJson(filterVal, this.exprotList)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: this.name + '_' + dateTools.FormatDate(),
              })
              this.exportLoading = false
            })
            .catch(() => {
              this.exportLoading = false
            })
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
    fetchParams() {
      this.query.queryString = Object.assign({}, this.query.queryString, this.$route.params)
    },
  },
  created: function () {
    this.fetchParams()
    if (this.query.queryString.sn) this.getList()
  },
}
</script>

<style scoped>
</style>
